<template>
  <div class="log_cent">
    <div class="log_cent_title">
      <span>日志管理</span>
    </div>
    <div class="log_cent_b">
      <div class="log_cent_b_title">
            <a-select  style="width: 300px" @change="handleChange" :allowClear='true' placeholder='请选择操作人员' size="large">
                  <a-select-option v-for="(item,i) in arr" :key="i" :value="item.key">
                     {{item.name}}
                  </a-select-option>
            </a-select>
            <a-date-picker @change="onChange" size="large" style="margin-left:20px" placeholder="请选择日期"/>
            <a-button type="primary" size="large" style="margin-left:20px" @click="search">搜索</a-button>
            <div>
              <a-button type="primary" icon="download"  size="large" style="margin-top:30px" @click="downloadarr">批量导出</a-button>            
            </div>
      </div>
        <a-table :columns="columns" :data-source="datalist" bordered :row-selection="{ onChange: onSelectChange }"  :rowKey='record=>record.id'></a-table>
        <a-pagination show-quick-jumper :defaultPageSize='1'  :current='yeshu' :total="totalnum" @change="onChange1" style=" margin-top:15px;text-align:right" />
    </div>
  </div>
</template>

<script>
import {get,deletes,piliangdeletes} from '@/api/log'

const columns = [
  {
    title: '操作员',
    dataIndex: 'name',
    align:'center'
  },
  {
    title: '操作时间',
    dataIndex: 'time',
    align:'center'
  },
  {
    title: '操作记录',
    dataIndex: 'jilv',
    align:'center'
  },

];


export default {
  data(){
    return{
      download:[],
      arr:[
        {name:"张三",key:"san"},
        {name:"李四",key:"si"},
        {name:"王五",key:"wu"},
      ],
      datalist:[],
      columns,
      yeshu:1,
      totalnum:0,
    }
  },
  mounted(){
    this.getlist(1)

  },
  methods:{
    //获取列表
    getlist(val){
      new Promise((resolve, reject) => {
        get({pageNo:val,pageSize:10}).then(response => {
          console.log(response);
          if(response.code==0){
            this.dataList=response.data.records
            this.totalnum=response.data.pages
          }else{
            this.$notification.error({
            message: '失败',
            description: response.msg
            })
          }
          resolve()
        }).catch(error => {
            this.$notification.error({
            message: '失败',
            description:'获取列表失败'
            })
          reject(error)
        })
      })
    },
    //下拉选择的参数
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    //时间选择的参数
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    //搜索
    search(){
      console.log("搜索");
    },
    //选择的数据
    onSelectChange(keys,rows) {
      this.download=rows
      console.log(keys,rows);
      console.log(this.download);
    },
    //批量下载
    downloadarr(){
      if(this.download.length){
        alert('下载');
      }else{
        alert('请选择需要下载的数据')
      }
    },
      //分页
    onChange1(pageNumber) {
        this.yeshu=pageNumber
        this.getlist(pageNumber)
      },
  }
}
</script>

<style scoped>
.log_cent{
  background: #fff;
  border: 1px solid #ccc;
}
.log_cent_title{
  width: 100%;
  font-size: 16px;
  color: #333;
  background: #f6f6f6;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  border-bottom: 1px solid #ccc;
}
.log_cent_title span{
  border-left: 4px solid #0086ff;
  padding-left: 15px;
}
.log_cent_b{
  max-width: 1200px;
  margin: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
.log_cent_b_title{
  margin-bottom: 30px;
}
</style>